<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>体验</title>
</head>
<body>
  <div id="app">
    <h1>购物车：</h1>
    <ul class="cart">
      <li>编号 - 标题 - 单价 - 数量 - 小计 - 操作</li>
      <li
        v-for="prod in cart"
      >
        {{ prod.id }} - {{ prod.title }} - {{ prod.price }}
        - <button v-on:click="modifyAmount('minus', prod.id)">-</button>
          {{ prod.amount}}
          <button v-on:click="modifyAmount('plus', prod.id)">+</button>
        - {{ prod.price * prod.amount }}
        - <button v-on:click="removeFromCart(prod.id)">删除</button>
      </li>
    </ul>

    <h1>推荐商品：</h1>
    <ul class="recommend">
      <li v-for="prod in recommends">
        {{ prod.id }} - {{ prod.title }} - {{ prod.price }}
        - <button v-on:click="addToCart(prod)">加入购物车</button>
      </li>
    </ul>
  </div>

  <script src="./libs/vue.js"></script>
  <script>
    // mvvm
    const vm = new Vue({
      el: '#app', // element, v - view
      data: { // m - model
        // 推荐商品的数组
        recommends: new Array(6).fill(null).map((v, i) => ({
          id: i + 1,
          title: '商品标题：' + (i + 1),
          price: Math.floor(Math.random() * 100 + 9)
        })),
        // 购物车的数组
        cart: []
      },
      methods: { // 方法
        // 加入购物车
        addToCart(prod) {
          const curr = {
            ...prod,
            amount: 1, // 加入购物车商品数量初始化为1
          }
          // 判断当前商品是否在购物车中已存在
          const index = this.cart.findIndex(item => item.id === curr.id)
          if (index !== -1) {
            // 存在，则叠加数量
            this.cart[index].amount += 1
          } else {
            // 将当前加入购物车的商品对象保存到购物车的数组中
            this.cart.push(curr)
          }
        },
        // 删除购物车中商品
        removeFromCart(id) {
          this.cart = this.cart.filter(item => item.id !== id)
        },
        // 修改数量
        modifyAmount(type, id) {
          const prod = this.cart.find(item => item.id === id)
          switch(type) {
            case 'plus':
              prod.amount += 1
              break
            case 'minus':
              if (prod.amount <= 1) {
                return
              }
              prod.amount -= 1
              break
          }
        }
      }
    })
  </script>
</body>
</html>